<template>
    <div class="container">
        <a-radio-group v-model="type" default-value="season" button-style="solid" @change="showChart">
            <a-radio-button value="season"> 商品季度销量统计 </a-radio-button>
            <a-radio-button value="area"> 商品销量占比统计 </a-radio-button>
        </a-radio-group>
        <div class="total" id="myChart" ref="myChart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {totalSeason} from '../services/total'
export default {
    data() {
        return {
            type: "season",
        };
    },
    mounted() {
        // this.$nextTick(() => {

        // });
        // console.log(this.$refs.myChart);
        // // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(this.$refs.myChart);
        // // 绘制图表
        // myChart.setOption({});
        this.showChart();
    },
    methods: {
        
        async showChart(){
            // 销毁之前的实例
            echarts.dispose(this.$refs.myChart);
            // 重新创建新的实例
            let myChart = echarts.init(this.$refs.myChart);
            if(this.type == 'season'){
                let seasonData = await totalSeason(2021);
                myChart.setOption(this.seasonOption(seasonData), true);
            }else{
                myChart.setOption(this.areaOption(), true);
            }
        },

        seasonOption(seasonData) {
            return {
                title: {
                    text: "商品季度销量统计",
                },
                tooltip: {},
                xAxis: {
                    // data: [
                    //     "衬衫",
                    //     "羊毛衫",
                    //     "雪纺衫",
                    //     "裤子",
                    //     "高跟鞋",
                    //     "袜子",
                    // ],
                    data: seasonData.xAxisData
                },
                yAxis: {},
                series: seasonData.series
                // [
                //     {
                //         name: "一季度",
                //         type: "bar",
                //         data: [10, 20, 36, 10, 10, 20],
                //     },
                //      {
                //         name: "二季度",
                //         type: "bar",
                //         data: [12, 20, 36, 10, 10, 20],
                //     },
                //      {
                //         name: "三季度",
                //         type: "bar",
                //         data: [5, 20, 36, 10, 10, 20],
                //     },
                //      {
                //         name: "四季度",
                //         type: "bar",
                //         data: [8, 20, 36, 10, 10, 20],
                //     },
                // ],
            };
        },
        areaOption() {
            return {
                series: [
                    {
                        type: "pie",
                        stillShowZeroSum: true,
                        label: {
                            show: true,
                        },
                        data: [
                            {
                                value: 250,
                                name: "直接访问",
                            },
                            {
                                value: 430,
                                name: "联盟广告",
                            },
                            {
                                value: 100,
                                name: "搜索引擎",
                            },
                        ],
                    },
                ],
            };
        },
    },
};
</script>

<style scoped>
.total {
    width: 100%;
    height: 500px;
}
</style>